<template>
  <!-- 添加商品 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="box">
    <div class="header">
      <span style="position: relative"
        ><el-icon class="ico" size="16"><InfoFilled /></el-icon> 添加商品信息</span
      >
    </div>
    <el-steps finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <el-tabs tab-position="left" style="margin-top: 20px;">
      <el-tab-pane label="基本信息" name="0"><!-- 基本信息面板 --></el-tab-pane>
      <el-tab-pane label="商品参数" name="1"><!-- 商品参数面板 --></el-tab-pane>
      <el-tab-pane label="商品属性" name="2"><!-- 商品静态属性面板 --></el-tab-pane>
      <el-tab-pane label="商品图片" name="3"><!-- 图片上传面板 --></el-tab-pane>
      <el-tab-pane label="商品内容" name="4"><!-- 商品描述面板 --></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'

//表单验证
// const addFormRules= {
//  	goods_name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
// 	 goods_price: [{ required: true, message: '请填写商品价格', trigger: 'blur' }],
//  	goods_weight: [{ required: true, message: '请填写商品重量', trigger: 'blur' }],
//  	goods_number: [{ required: true, message: '请填写商品数量', trigger: 'blur' }],
//  	goods_cat: [{ required: true, message: '请选择商品分类', trigger: 'blur' }]
//  }
</script>

<style scoped lang="scss">
.box {
  padding: 20px;
  margin-top: 15px;
  background: #fff;
  width: 97%;
  .header {
    width: 100%;
    height: 35px;
    background: #f4f4f4;
    margin-bottom: 13px;
    text-align: center;
    line-height: 35px;
    color: #9e9d9e;
    font-size: 12px;
    position: relative;
    .ico {
      position: absolute;
      left: -24%;
      top: 0px;
    }
  }
}
</style>
